page {
  height          : 100vh;
  background-color: rgba(238, 238, 238, 1);
}

.user-info {
  height  : 45vh;
  position: relative;

  .user-img-wrap {
    height    : 100%;
    text-align: center;
    overflow  : hidden;
    position  : relative;

    .user-bg {
      width : 71%;
      filter: blur(35rpx);
    }

    .user-info-content {
      width          : 30%;
      height         : 60%;
      display        : flex;
      flex-direction : column;
      justify-content: space-between;
      position       : absolute;
      top            : 50%;
      left           : 50%;
      transform      : translate(-50%, -50%);

      .user-avatar {
        // border       : 3px solid red;
        border-radius: 50%;
        box-shadow   : 0px 0px 3px #888;
        overflow     : hidden;

        image {
          width: 100%;
        }
      }

      .user-nickname {
        color    : #fff;
        font-size: 36rpx;
      }
    }
  }

  button {
    width    : 28%;
    position : absolute;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -70%);
  }
}

.user-content {
  position: relative;

  .main {
    width         : 90%;
    padding-bottom: 24rpx;
    font-size     : 28rpx;
    color         : #888;
    position      : absolute;
    top           : -72rpx;
    left          : 50%;
    transform     : translateX(-50%);

    .history-wrap {
      display: flex;

      navigator {
        flex      : 1;
        text-align: center;
        padding   : var(--p14) 0;
        position  : relative;

        .num {
          color    : var(--theme);
          font-size: 32rpx;
        }

        .text {}

        &+navigator::before {
          content    : '';
          display    : block;
          width      : 1rpx;
          height     : 67rpx;
          border-left: 1rpx solid #888;
          position   : absolute;
          top        : 50%;
          transform  : translateY(-50%);
        }
      }

    }

    .order-wrap {

      .order-title {
        padding: var(--p14);

        border-bottom: 4rpx solid rgba(238, 238, 238, 1);
      }

      .order-content {
        display: flex;

        navigator {
          flex      : 1;
          padding   : var(--p14);
          text-align: center;

          .iconfont {
            font-size: 60rpx;
            color    : var(--theme);
          }

          .text {}
        }
      }
    }

    .address-wrap {
      height: 79rpx;

      navigator {
        height      : 100%;
        padding-left: var(--p14);
        line-height : 79rpx;
      }
    }

    .contact-wrap {
      .contact-content {
        display        : flex;
        justify-content: space-between;

        .text {}

        .contact-phone {}
      }

      .suggest-content {
        navigator {}
      }

      .about-content {}

      >view {
        padding: 20rpx 0 20rpx 14rpx;
      }

      >view+view {
        border-top: 4rpx solid #eeeeee;
      }

      &>view:first-child {
        padding-right: var(--p14);
      }
    }

    .promote.wrap {
      background-color: #fff;

      navigator {
        padding: 20rpx;
      }
    }

    .history-wrap,
    .order-wrap,
    .address-wrap,
    .contact-wrap {
      background-color: #fff;
      margin-bottom   : 18rpx;
    }
  }
}